import React, { useEffect } from 'react'
import echarts from 'echarts';
import 'echarts/map/js/china';
import { getChinaMap } from '../../components/echarts/home-echarts'
// import geoJson from 'echarts/map/json/china.json';
import geoJson from '../../assets/china.json'
import { getChinaMapInfo, getHomeInfo } from '../../api'
import { BorderBox7 } from '@jiaminghi/data-view-react'
// import homeSmallBox from '../../config/homeSmallBox'


import './index.css'
const homeNameBox = [{
  index: 0,
  name: '已接入矿区数量',
}, {
  index: 1,
  name: '已接入用户数量',
}, {
  index: 2,
  name: '已接入部门数量',
}, {
  index: 3,
  name: '测井数据数量',
}, {
  index: 4,
  name: '本月数据上传量',
}]

class ChinaMap extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      homeSmallBox: []
    }
  }
  componentDidMount() {

    this.getChinaMapData()
    this.getHomeData()


  }

  getHomeData = async () => {

    let result = await getHomeInfo(window.localStorage.getItem("org_id"));
    let data = result.data;
    this.setState({
      homeSmallBox: [data.organizationSum, data.userSum, data.workspaceSum, data.drillSum, data.monthUploadSum]
    })
  }

  getChinaMapData = async () => {
    const result = await getChinaMapInfo();
    const data = []
    geoJson.features.forEach(item => {
      result.data.forEach(items => {
        if (item.properties.name.slice(0, 2) === items.name.slice(0, 2)) {
          data.push({
            detail: items.detail,
            name: item.properties.name
          })
        }
      })
    });
    const myChart = await echarts.init(document.getElementById('mainMap'));
    const options = getChinaMap(data)
    await echarts.registerMap('china', geoJson)
    await myChart.setOption(options);
  }


  render() {
    return (
      <div className="home-wrapper" style={{ background: 'transparent' }}>
        <div className="home-top" style={{ minHeight: 120 }} ref={(node) => {
          if (node) {
            node.style.setProperty('background', `none`, 'important');
          }
        }}
        >
          {this.state.homeSmallBox.map((item, index) => {
            return (
              <div className="small-box">
                <div className="data-show">
                    <h1>{item}</h1>
                    <span>{homeNameBox[index].name}</span>
                  </div>

              </div>
            )
          })
          }
        </div>
        <div id='mainMap'
          style={{ width: '100vm', height: '80vh' }}
        >
        </div>
      </div>
    )
  }

}

export default ChinaMap;